<script lang="ts">
export default {
  name: 'study6-compontents-SonDemo1'
}
</script>

<template>
  <h2>props</h2>
  <div class="note">
    <h3>defineProps</h3>
    <p>1. defineProps：可以接收父组件的属性(能在模板字符串中调用，但不能在script中使用)</p>
    <p>2. defineProps：接收的属性要使用，需要赋值给变量，再用（.属性）的形式调用</p>
    <p>3. defineProps：接收的属性也可以通过解构直接使用</p>
  </div>
  <div class="note">
    <h3>defineProps()传入属性</h3>
    <p>1. 可传入一个数组（一个也要用数组形式）</p>
    <p>2. 可传入一个对象（可约束属性）</p>
    <p>3. 可`尖括号`约束defineProps类型(ts语法，较推荐)</p>
    <p>注：一个组件只能使用一次defineProps</p>
  </div>

  <hr class="hr-style" />
  <div class="test">
    <h3>标题：{{ title }}</h3>
    <p>描述：{{ descript }}</p>
  </div>
</template>

<script setup lang="ts">
// 1，接收一个数组，只有一个参数也要用数组形式接收
// const props = defineProps('title')  报错
// const props = defineProps(['title'])  
// const props = defineProps(['title','descript'])
// const t = props.title
// console.log(props.title, 'props.title');

// 2. 接收一个对象（约束类型）
// const props = defineProps({
//   title: String,
//   descript: {
//     type: [String,Number],
//     required: true
//   }
// })

// 3. 定义defineProps类型
// const props2 = defineProps<{
//   title?: string
//   descript: number
// }>()
// console.log(props2.title,'props2.title');

// 可以解构获取属性
const {title,descript} = defineProps<{
  title?: string
  descript: number
}>()
console.log(title, 'title');
// const {title = '你是著住户珍珠还真租住',descript} = defineProps<{
//   title?: string
//   descript: number
// }>()
// console.log(title, 'title');

</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
